<template>
	<view>
		<!--微信 、支付宝-->
		<!-- <view class="payment" :class="showPop ? 'on' : ''" v-if="payType!='bank'"> -->
		<view :class="{payment:true,on:showPop,bank:payType=='bank'}">
				<view class="title acea-row row-center-wrapper">
					{{popName}}<text class='font-color'>￥{{orderMoney || 0}}</text>
					<text class="iconfont icon-guanbi" @click='close'></text>
				</view>
				<view class="item acea-row row-between-wrapper" v-if="payType!='bank'">
					<view class="view-img"><img :src="iconUrl" alt="" class="img-responsive" v-if="iconUrl"></view>
					<view class="popConfig-btn">
						<button @click="operate">已支付</button>
						<button @click="close">取消</button>
					</view>
				</view>
				<view class="item acea-row row-between-wrapper" v-if="payType=='bank'">
					<view class="bankInfo acea-row row-center-wrapper">
						收款户名：Zhu  lizhou 
						<text class="copytip" @click="copyTextToClipboard('Zhu  lizhou')">复制</text>
					</view>
					<view class="bankInfo acea-row row-center-wrapper">
						收款账户：1883154860
						<text class="copytip" @click="copyTextToClipboard('1883154860')">复制</text>
					</view>
					<view class="bankInfo acea-row row-center-wrapper">
						银行名称：Access  bank
						<text class="copytip" @click="copyTextToClipboard('Access  bank')">复制</text>
					</view>
					<view class="popConfig-btn">
						<button @click="operate">已支付</button>
						<button @click="close">取消</button>
					</view>
				</view>
			</view>
			<view class="mask" @click='close' v-if="showPop"></view>
		</view>
	</view>
</template>
 
<script>
export default {
	name: "paymentList",
	props: {
		showPop: {
				type: Boolean,
				required: true,
				default: false
			},
			iconUrl: {
				type: String,
				required: true
			},
			popName: {
				type: String,
				required: true,
			},
			orderMoney: {
				type: String,
				required: true,
				default:''
			},
			payType: {
				type: String,
				required: true
			},
			popDes: {
				type: String,
				required: true
			},
			popBtn: {  //	[{name:'确认'},{name:'取消'}]
				type: Array,
				required: false
			}
		},
		data() {
			return {};
		},
		methods: {
			close() {
				this.$emit("changeShowPop", false)
			},
			operate(){
				this.$emit("firstBtnOperate","")
			},
			// 复制文本到剪贴板
			copyTextToClipboard:function(text) {
			  uni.setClipboardData({
			    data: text,
			    success: function () {
			      console.log('复制成功');
			      // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
			      uni.showToast({
			        title: '复制成功',
			        icon: 'success',
			        duration: 2000
			      });
			    },
			    fail: function () {
			      console.log('复制失败');
			      // 可以添加错误处理或用户友好的提示
			    }
			  });
			}
		},
		watch: {
		},
	}
</script>
 
<style lang="scss" scoped>
.payment {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 16rpx 16rpx 0 0;
		background-color: #fff;
		padding-bottom: 60rpx;
		z-index: 99;
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		transform: translate3d(0, 100%, 0);
	}
	.payment.bank {
			height: 55%;
		}
	.bankInfo {
			text-align:center;
			height: 123rpx;
			font-size: 28rpx;
			color: #282828;
			font-weight: bold;
			padding-right: 30rpx;
			margin-left: 30rpx;
			position: relative;
			border-bottom: 1rpx solid #eee;
	}
	.copytip{
		font-size: 24rpx;
		margin-left: 60rpx;
		color: #5861d0;
	}
	.payment.on {
		transform: translate3d(0, 0, 0);
	}

	.payment .title {
		text-align: center;
		height: 123rpx;
		font-size: 32rpx;
		color: #282828;
		font-weight: bold;
		padding-right: 30rpx;
		margin-left: 30rpx;
		position: relative;
		border-bottom: 1rpx solid #eee;
	}

	.payment .title .iconfont {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 43rpx;
		color: #8a8a8a;
		font-weight: normal;
	}

	.payment .item {
		border-bottom: 1rpx solid #eee;
		height: 100%;
		margin-left: 30rpx;
		padding-right: 30rpx;
	}

	.payment .item .left {
		width: 610rpx;
	}

	.payment .item .left .text {
		width: 540rpx;
	}

	.payment .item .left .text .name {
		font-size: 32rpx;
		color: #282828;
	}

	.payment .item .left .text .info {
		font-size: 24rpx;
		color: #999;
	}

	.payment .item .left .text .info .money {
		color: #ff9900;
	}

	.payment .item .left .iconfont {
		font-size: 45rpx;
		color: #09bb07;
	}

	.payment .item .left .iconfont.icon-zhifubao {
		color: #00aaea;
	}

	.payment .item .left .iconfont.icon-yuezhifu {
		color: #ff9900;
	}

	.payment .item .left .iconfont.icon-yuezhifu1 {
		color: #eb6623;
	}

	.payment .item .iconfont {
		font-size: 0.3rpx;
		color: #999;
	}
	
	/* 全局样式 */
	.img-responsive {
	  width: 100%; /* 宽度自适应 */
	  height: 100%; /* 高度自适应 */
	  object-fit: cover; /* 图片覆盖整个容器，可能被裁剪 */
	  /* 或者使用 */
	  //object-fit: contain; /* 图片缩放以适应容器，可能会出现空白边框 */
	}
	.view-img{
		width: 100%; /* 宽度自适应 */
		height: 85%; /* 高度自适应 */
	}
	.popConfig-btn {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;

		button {
			margin-bottom: 10%;
			width: 45%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #5861d0ff;
			color: white;
			border-radius:10rpx;
		}

		button:nth-last-child(1) {
			background-color: white;
			color: #5861d0;
			border: 2rpx solid #5861d0;
		}
	}
</style>